import { React, useRef, useState, useEffect } from "react";
import { Swiper, Toast, CapsuleTabs, Grid } from 'antd-mobile'
import { BrowserRouter as Router, Route, Routes, Link, Outlet, useNavigate, useLocation, useParams } from 'react-router-dom'
import { getCurrentCity } from '../../utils/baiduMap'
import axios from 'axios'

import style from './index.module.scss';
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

const url = 'https://api-haoke-web.itheima.net'
let loading = <Swiper.Item key={0}><div className={style.content}></div></Swiper.Item>

const navs = [
    {
        id: 1,
        img: Nav1,
        title: '整租',
        path: '/home/list',
    },
    {
        id: 2,
        img: Nav2,
        title: '合租',
        path: '/home/list',
    },
    {
        id: 3,
        img: Nav3,
        title: '地图找房',
        path: '/home/list',
    },
    {
        id: 4,
        img: Nav4,
        title: '去出租',
        path: '/home/list',
    },
]

const Menu = () => {
    const navigate = useNavigate();

    return (<Grid className={style.nav} columns={4} gap={0}>
        {navs.map(item => (
            <Grid.Item key={item.id} onClick={() => navigate(item.path)}>
                <img src={item.img} alt=''></img>
                <h2>{item.title}</h2>
            </Grid.Item>
        ))
        }
    </Grid >
    )
}
const RentGroup = (props) => {
    console.log(props);
    return (
        <div className={style.group}>
            <h3 className={style.title}>
                租房小组 <span className="more">更多</span>
            </h3>
            <Grid className={style.group.admGrid} columns={2} gap={0} square={false}>
                {(props.data == null ? [] : props.data).map(item => (
                    <Grid.Item className={style.griditem} key={item.id} onClick={() => navigate(item.path)}>
                        <div className={style.desc}>
                            <p className={style.title}>{item.title}</p>
                            <span className={style.info}>{item.desc}</span>
                        </div>
                        <img src={url + item.imgSrc} alt=''></img>
                    </Grid.Item>
                ))
                }
            </Grid>
        </div>
    )

}



const Home = () => {
    let [items, setitems] = useState()
    let [isSwiperLoaded, setisSwiperLoaded] = useState(false)
    let [groups, setgroups] = useState()
    async function getSwipers() {
        if (isSwiperLoaded) {
            return null
        }
        const res = await axios.get(url + '/home/swiper')
        let swi = res.data.body
        let data = swi.map((data, index) => (
            <Swiper.Item key={data.id}>
                <div
                    className={style.content}
                    style={{
                        backgroundSize: 'cover',
                        backgroundImage: `url(${url + data.imgSrc})`,
                    }}
                    onClick={() => {
                        Toast.show(`你点击了卡片 ${index + 1}`)
                    }}
                >
                </div>
            </Swiper.Item >
        ))
        console.log('function items:', data)
        setisSwiperLoaded(true)
        setitems(data)
    }
    async function getGroups() {
        if (groups != null) {
            return
        }
        const res = await axios.get(url + '/home/groups', {
            params: {
                area: 'AREA|88cff55c-aaa4-e2e0'
            }
        })
        console.log(res);
        setgroups(res.data.body)
    }
    getSwipers()
    getGroups()
    return (
        <div title='index' className="index">
            {/* 轮播图 */}
            <Swiper autoplay>{isSwiperLoaded ? items : loading}</Swiper>
            {/** 导航菜单 */}
            <Menu></Menu>
            {/** 租房小组 */}
            <RentGroup data={groups}></RentGroup>
            <Link to='/map'>地图</Link>
        </div>
    )
}

export default Home